<!-- Credit.vue -->
<template>
	<div class="wrapper">
		<header>
			<p class="back-btn" @click="$router.go(-1)">〈</p>
			<p>积分中心</p>
		</header>

		<div class="content-box">
			<div class="credit-summary">
				<div class="summary-item">
					<span>当前积分</span>
					<strong>{{ totalNum }}</strong>
				</div>
				<div class="summary-item">
					<span>即将过期</span>
					<strong class="expiring">{{ expiringNum }}</strong>
				</div>
			</div>

			<div class="credit-list">
				<div class="list-header">
					<h3>积分明细</h3>
					<button @click="loadData">刷新</button>
				</div>
				
				<ul v-if="creditList.length">
					<li v-for="item in creditList" :key="item.creditId">
						<div class="credit-info">
							<span class="type">消费积分</span>
							<span class="time">{{ formatTime(item.createTime) }}</span>
						</div>
						<div class="credit-detail">
							<span class="num">+{{ item.num }}</span>
							<span class="expire">有效期至 {{ formatDate(item.expiredTime) }}</span>
						</div>
					</li>
				</ul>
				<div v-else class="empty">暂无积分记录</div>
			</div>
		</div>

		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
	name: 'Credit',
	data() {
		return {
			totalNum: 0,
			expiringNum: 0,
			creditList: [],
			user: {}
		}
	},
	created() {
		this.user = this.$getSessionStorage('user');
		this.loadData();
	},
	methods: {
		loadData() {
			const userId = this.user.userId;
			
			// 获取总积分
			this.$axios.get('Credit/totalNum', {
				params: { userId }
			}).then(totalRes => {
				this.totalNum = totalRes.data.result;
				this.expiringNum = 0;
			}).catch(error => {
				console.error('总积分请求失败:', error);
				alert('获取积分总额失败');
			});

			// 获取明细
			this.$axios.get('Credit/availableCredit', {
				params: { userId }
			}).then(listRes => {
				this.creditList = listRes.data.result || [];
			}).catch(error => {
				console.error('明细请求失败:', error);
				alert('获取积分明细失败');
			});
		},
		
		formatDate(timestamp) {
			const date = new Date(timestamp);
			return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;
		},
		
		formatTime(timestamp) {
			const date = new Date(timestamp);
			return `${date.getHours().toString().padStart(2,'0')}:${date.getMinutes().toString().padStart(2,'0')}`;
		}
	},
	components: {
		Footer
	}
}
</script>

<style scoped>
/* 保持原有样式不变 */
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-btn {
	position: absolute;
	left: 4vw;
	font-size: 6vw;
}

.content-box {
	margin-top: 12vw;
	padding-bottom: 14vw;
}

.credit-summary {
	display: flex;
	justify-content: space-around;
	padding: 4vw;
	background: #fff;
	margin: 3vw;
	border-radius: 2vw;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.summary-item {
	text-align: center;
}

.summary-item span {
	font-size: 3.8vw;
	color: #666;
}

.summary-item strong {
	font-size: 6vw;
	color: #0097FF;
	display: block;
	margin-top: 2vw;
}

.expiring {
	color: #ff4d4f !important;
}

.credit-list {
	background: #fff;
	margin: 3vw;
	border-radius: 2vw;
	padding: 4vw;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4vw;
}

.list-header h3 {
	font-size: 4.2vw;
	color: #333;
}

.list-header button {
	background: #38CA73;
	color: white;
	border: none;
	padding: 2vw 4vw;
	border-radius: 1vw;
	font-size: 3.6vw;
}

.credit-list li {
	padding: 3vw 0;
	border-bottom: 1px solid #eee;
}

.credit-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2vw;
}

.type {
	color: #0097FF;
	font-size: 3.6vw;
}

.time {
	color: #999;
	font-size: 3.2vw;
}

.num {
	color: #38CA73;
	font-size: 4vw;
	font-weight: bold;
}

.expire {
	color: #666;
	font-size: 3.2vw;
}

.empty {
	text-align: center;
	color: #999;
	padding: 6vw 0;
	font-size: 3.8vw;
}
</style>